import { h,Component } from 'preact';

// import { style } from './index.scss';
import { createElement, Fragment } from 'preact';

const query = {
	'screen-xs': {
		maxWidth: 575
	},
	'screen-sm': {
		minWidth: 576,
		maxWidth: 767
	},
	'screen-md': {
		minWidth: 768,
		maxWidth: 991
	},
	'screen-lg': {
		minWidth: 992,
		maxWidth: 1199
	},
	'screen-xl': {
		minWidth: 1200,
		maxWidth: 1599
	},
	'screen-xxl': {
		minWidth: 1600
	}
};

class PMedia extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isMobile: false,
			loading:true,
		};
	}

	componentDidMount() {
		window.onresize=(e) => {
			this.setState({ isMobile: this.isMobile() });
		};
        
        this.setState({isMobile:this.isMobile(),loading:false})
	}

    // eslint-disable-next-line react/sort-comp
    isMobile = _ => {
    	const { availWidth,availHeight } = window.screen;
    	return availWidth <= 960 ;
    }


    render({ children },state) {

    	if(state.loading){
    		return <Fragment>Loading</Fragment>
    	}

    	return (
    		<Fragment>
    			{
    				createElement(children,{
    					...state
    				})
    			}
    		</Fragment>
    	);
    }
}

PMedia.propTypes = {

};

export default PMedia;
